<template>
    <div class="oederInfo">
        <!-- 订单信息 -->
        <van-nav-bar title="订单信息" left-arrow @click-left="onClickLeft" />
        <div class="content">
            <div class="top" v-if="orderType == 1">
                <div class="tit">预约商品自取</div>
                <div class="con">
                    <span>预约人: 天天天</span>
                    <span>预约电话：19912237281</span>
                    <span>自取地址：上海浦东新区北蔡镇<van-icon name="arrow" /></span>
                </div>
            </div>
            <div class="top" v-if="orderType == 2">
                <div class="tit"><span></span>
                    <van-cell style="padding: 0;" title="预计10月3日发货 10月6日到达" is-link />
                    <span>快递运输|预计10月3日发货，10月6日到达</span>
                </div>
                <div class="con con2">
                    <span class="name">张兮兮 <span class="num">199****7281</span></span>
                    <span class="address">地址：上海浦东新区北蔡镇</span>
                </div>
            </div>
            <div class="top top2" v-if="orderType == 3">
                <div class="tit">商品已签收</div>
                <div class="con con2">
                    <span class="name">张兮兮 <span class="num">199****7281</span></span>
                    <span class="address">地址：上海浦东新区北蔡镇</span>
                </div>
            </div>
            <div class="mid">
                <Card />

                <van-cell title-style="
        text-align: left;" title="实付款">
                    共计
                    <span style="font-weight: 700;
font-size: 18px;
color: #E1222A;">￥421.99</span>
                </van-cell>
                <van-cell title-style="
        text-align: left;" title="订单编号">
                    <span style="font-weight: 500;
font-size: 14px;
color: #232323;">256154513568</span>复制
                </van-cell>
                <van-cell title-style="
        text-align: left;" title="支付时间" value="2024/03/12 15:00" />
                <van-cell title-style="
        text-align: left;" title="支付方式" value="xxx支付" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Card from '../../../components/card.vue'
import { ref } from 'vue';
import { Toast } from 'vant';
const active = ref(0);
const orderType = ref(3);
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const onSubmit = () => Toast('点击按钮');
</script>

<style lang="less" scoped>
@import url(../../../style/common.css);

.oederInfo {
    background: #F6F7F9;
    width: 100%;
    height: 100vh;
}

.van-nav-bar {
    width: 100%;
    height: 52px;
}

.content {
    padding: 15px;
}

.top {
    width: 345px;
    height: 123px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    padding: 15px 10px;
    box-sizing: border-box;

    .tit {
        text-align: left;
        font-size: 16px;
        color: #232323;

        span {
            font-weight: 250;
            font-size: 12px;
            color: #999999;
        }
    }

    .con {
        margin-top: 10px;
        height: 70%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
        color: #999999;

        .name {
            font-weight: 250;
            font-size: 12px;
            color: #232323;
        }

        .num {
            font-weight: 500;
            font-size: 12px;
            color: #666666;
        }

        .address {
            font-weight: 250;
            font-size: 12px;
            color: #999999;
        }
    }

    .con2 {
        height: 50%;
    }
}

.top2 {
    height: 94px;

    .con2 {
        height: 60%;
    }
}

.mid {
    margin-top: 15px;
    width: 345px;
    height: 241px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

.crad {
    margin-top: 13px;
    height: 159px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}
</style>